<template>
	<div style="height: 100%;">
		<van-nav-bar :title="$route.params.zhuo+'号桌'" left-text="返回" left-arrow @click-left="prev"/>
		<van-tree-select height="100%" :items="foodtype" :main-active-index.sync="active">
			<template #content>
				<ul v-for="item of foodList" class="diancan-right">
					<li @click="addfood(item)" v-if="item.sign && active==0">
						<strong>{{item.foodname}}</strong>
						<i v-for="sum of selectedfood" v-if="sum.foodid==item.foodid">*{{sum.count}}</i>
						<span>{{item.price}}元/份</span>
					</li>
					<li @click="addfood(item)" v-if="item.type=='烧烤' && active==1">
						<strong>{{item.foodname}}</strong>
						<i v-for="sum of selectedfood" v-if="sum.foodid==item.foodid">*{{sum.count}}</i>
						<span>{{item.price}}元/份</span>
					</li>
					<li @click="addfood(item)" v-if="item.type=='热菜' && active==2">
						<strong>{{item.foodname}}</strong>
						<i v-for="sum of selectedfood" v-if="sum.foodid==item.foodid">*{{sum.count}}</i>
						<span>{{item.price}}元/份</span>
					</li>
					<li @click="addfood(item)" v-if="item.type=='凉菜' && active==3">
						<strong>{{item.foodname}}</strong>
						<i v-for="sum of selectedfood" v-if="sum.foodid==item.foodid">*{{sum.count}}</i>
						<span>{{item.price}}元/份</span>
					</li>
					<li @click="addfood(item)" v-if="item.type=='汤羹' && active==4">
						<strong>{{item.foodname}}</strong>
						<i v-for="sum of selectedfood" v-if="sum.foodid==item.foodid">*{{sum.count}}</i>
						<span>{{item.price}}元/份</span>
					</li>
					<li @click="addfood(item)" v-if="item.type=='主食' && active==5">
						<strong>{{item.foodname}}</strong>
						<i v-for="sum of selectedfood" v-if="sum.foodid==item.foodid">*{{sum.count}}</i>
						<span>{{item.price}}元/份</span>
					</li>
					<li @click="addfood(item)" v-if="item.type=='酒水饮料' && active==6">
						<strong>{{item.foodname}}</strong>
						<i v-for="sum of selectedfood" v-if="sum.foodid==item.foodid">*{{sum.count}}</i>
						<span>{{item.price}}元/份</span>
					</li>
				</ul>
			</template>
		</van-tree-select>
		<van-button type="primary" @click="menushow" :disabled="!total" style="width: 100%;position: fixed;bottom: 0;left: 0;">
			<span v-if="total">￥{{total}}元 已</span><span v-else>尚未</span>点菜品
		</van-button>
		<van-action-sheet v-model="show" title="已点菜品">
			<hr color="#eee">
			<div class="menu" v-for="item of selectedfood" @click="subtractfood(item)">
				<strong>{{item.foodname}}*{{item.count}}<van-tag plain>点击减回</van-tag></strong><span>{{item.price}}元/份</span>
			</div>
			<p v-if="historyTotal">历史菜品</p>
			<div class="menu history" v-for="item of historyFoodList">
				<strong>{{item.foodname}}*{{item.count}}</strong><span>{{item.price}}元/份</span>
			</div>
			<van-button type="warning" style="width: 100%;" @click="submit" :disabled="!(total-historyTotal)">确认下单</van-button>
		</van-action-sheet>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				selectedfoodItem:{},
				selectedfood:[],
				historyFoodList:[],
				historyTotal:0,
				show:false,
				foodList:[],
				active:0,
				foodtype:[
					{text:"招牌菜"},
					{text:"烧烤"},
					{text:"热菜"},
					{text:"凉菜"},
					{text:"汤羹"},
					{text:"主食"},
					{text:"酒水饮料"}
				]
			}
		},
		computed:{
			total(){
				var tota=this.historyTotal;
				for(var i of this.selectedfood){
					tota+=i.count*i.price
				}
				return tota
			}
		},
		methods:{
			prev(){
				location.href=`${this.$localurl}#/`
			},
			menushow(){
				this.show=true;
			},
			addfood(fooditem){
				var isHas = false;
				for(let i of this.selectedfood){
					if(i.foodid === fooditem.foodid){
						isHas = true
					}
				}
				
				if(isHas){
					for(var i of this.selectedfood){
						if(i.foodid==fooditem.foodid){
							i.count++;
						}
					}
				}
				else{
					this.selectedfoodItem={}
					this.$set(this.selectedfoodItem,"count",1)
					for(var item in fooditem){
						this.selectedfoodItem[item]=fooditem[item]
					}
					this.selectedfood.push(this.selectedfoodItem)
				}
			},
			subtractfood(i){
				for(var item in this.selectedfood){
					if(this.selectedfood[Number(item)].foodid===i.foodid){
						if(this.selectedfood[Number(item)].count>1){
							this.selectedfood[Number(item)].count--
						}
						else{
							this.selectedfood.splice(item,1)
						}
					}
				}
				if(!this.total){
					this.show=false;
				}
			},
			submit(){
				var date=new Date
				var submitdate=`${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
				this.axios.get(`${this.$url}/submitBill`,{
					params:{
						tableid:this.$route.params.zhuo,
						foodslist:JSON.stringify(this.selectedfood.concat(this.historyFoodList)),
						total:this.total,
						submitdate:submitdate
					}
				}).then((response)=>{
					if(response.data==="success"){
						this.$notify({ type: 'success', message: '下单成功！', duration:500,onClose(){
							location.href=`${this.$localurl}#/`
							window.history.go(0)
						}})
					}
					else{
						this.$notify({ type: 'danger', message: '下单失败...', duration:500 });
					}
				})
			}
		},
		mounted(){
			this.axios.get(`${this.$url}/foodList`).then((response)=>{
				this.foodList=response.data
			})
			this.axios.get(`${this.$url}/historyFoodList?tableid=${this.$route.params.zhuo}`).then((response)=>{
				this.historyFoodList=JSON.parse(response.data[0].foodslist)
				this.historyTotal=response.data[0].total
			})
		}
	}
</script>

<style>
	html,body{
		height: 100%;
		padding-bottom: 90px;
	}
	.diancan-right li{
		height: 50px;
		line-height: 50px;
		border-bottom: 2px solid #eee;
		position: relative;
	}
	.diancan-right strong{
		position: absolute;
		left: 0;
		margin-left: 30px;
	}
	.diancan-right span{
		position: absolute;
		right: 0;
		margin-right: 30px;
	}
	.menu{
		padding: 16px 40px;
		overflow: hidden;
	}
	.menu>strong{
		float: left;
	}
	.menu>span{
		float: right;
	}
	.history{
		opacity: .5;
	}
</style>
